<template>
  <div>
    <el-upload
      class="avatar-uploader"
      :action="serverUrl"
      accept=".jpg, .png"
      :headers="header"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
    >
    </el-upload>
    <div v-loading="imageUpdating">
      <quill-editor
        v-model="myContent"
        ref="myQuillEditor"
        :options="editorOption"
        style="height: calc(40vh);white-space:pre-wrap;overflow: scroll;overflow-x: hidden"
      />
    </div>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { getToken } from '@/utils/auth'

export default {
  name: 'richTextEditor',
  props: {
    content: {
      type: String,
      default: true
    }
  },
  components: { quillEditor },
  data() {
    const toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
      ['blockquote', 'code-block'],

      [{ 'header': 1 }, { 'header': 2 }],               // custom button values
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
      [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
      [{ 'direction': 'rtl' }],                         // text direction

      [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

      [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
      [{ 'font': [] }],
      [{ 'align': [] }],
      ['image']
    ]
    return {
      myContent: '',
      serverUrl: process.env.VUE_APP_BASE_API + '/system/image/uploadMovementLinkImage',
      header: { Authorization: 'Bearer ' + getToken() },
      // 图片是否正在上传
      imageUpdating: false,
      toolbarOptions: [],
      editorOption: {
        placeholder: '请输入',
        theme: 'snow',  // or 'bubble'
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              'image': value => {
                if (value) {
                  // 触发input框选择图片文件
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }
    }
  },
  watch: {
    content(value) {
      this.myContent = value
    },
    myContent(value) {
      this.$emit('syncContent', value)
    }
  },
  created() {
    this.myContent = this.content
  },
  methods: {
    // 图片上传前,显示loading动画
    beforeUpload() {
      this.imageUpdating = true
    },

    // 图片上传成功
    uploadSuccess(res, file) {
      if (res.code === 200 && res.data) {
        let imgUrl = res.data.ossUrl
        // 获取富文本组件实例
        let quill = this.$refs.myQuillEditor.quill
        // 获取光标所在位置
        let length = quill.getSelection().index
        // 插入图片  res.info为服务器返回的图片地址
        quill.insertEmbed(length, 'image', imgUrl)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        this.msgError('图片上传失败')
      }
      this.imageUpdating = false
    },

    // 图片上传失败, loading动画消失
    uploadError() {
      this.imageUpdating = false
      this.msgError('图片上传失败')
    }
  }
}
</script>

<style scoped>

</style>
